<head>
    <style>
        body {margin: 0; padding: 0;}
    </style>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app" width="400" height="800"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        var dom = document.getElementById('app');

        var h = document.body.clientHeight;
        var w = document.body.clientWidth;
        var longer = Math.max(h, w);
        var shorter = Math.min(h, w);

        window.onresize = function () {
            window.location.href = window.location.href;
        };

        dom.style.width = longer;
        dom.width = longer;
        dom.style.height = shorter;
        dom.height = shorter;

        var option = {};

        if (window.orientation === 0 || window.orientation === 180 || w < h) {
            var transform_distance = (document.body.clientHeight - document.body.clientWidth) / 2;
            dom.style.transform = 'rotate(90deg) translateX(' + transform_distance + 'px) translateY(' + transform_distance + 'px)';
            option.events = {
                // 横屏转换
                interceptor: function (e) {
                    var x = e.canvasX;
                    e.canvasX = e.canvasY;
                    e.canvasY = document.body.clientWidth - x;
                    console.log(e)
                    return e;
                }
            };
        }

        $app.register(dom, option);
        $app.start();

        Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png', function (img) {
            // create a Sprite
            window.Sprite1 = $app.add({
                name: 'root',
                content: {
                    img: img,
                },
                // scroll: {
                //     scrollable: true
                // },
                style: {
                    width: $app.width, height: $app.height,
                    cutLeft: 0, cutTop: 0, // source position, default 0
                    left: 0, top: 0,
                    opacity: 1,
                    locate: 'lt', // default center
                    zIndex: 1, // z-index of this image
                },
                events: {
                    eIndex: 2, // event-index of this image
                    click: function (e) {
                        console.log(1, e);
                        return true;
                    },
                    // others: mousehold, mousedown, mouseout and touch events
                },
            });

            Sprite1.add({
                content: {
                    img: Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png'),
                },
                style: {
                    left: 0.28 * longer, top: 0.2 * shorter,
                    width: 0.1 * longer, height: 0.04 * shorter,
                },
                events: {
                    click: function (e) {
                        console.log(2, e);
                        this.style.left += 10;
                    }
                }
            });
        });
    </script>
</body>

